<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>红灯笼 - 科技零售公司</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
            line-height: 1.6;
        }

        .header {
            position: fixed;
            top: 0;
            width: 100%;
            background: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo img {
            width: 82px;
            height: 36px;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: #333;
            text-decoration: none;
            font-size: 1rem;
        }

        .hero {
            margin-top: 70px;
            padding: 4rem 2rem;
            text-align: center;
            background: linear-gradient(180deg, #FFE300 0%, #FFF8E1 100%);
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: #222;
        }

        .hero p {
            font-size: 1.1rem;
            color: #666;
            max-width: 800px;
            margin: 0 auto;
        }

        .download-section {
            text-align: center;
            padding: 2rem;
        }

        .news-section {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .news-card {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
        }

        .news-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .news-content {
            padding: 1rem;
        }

        .news-date {
            color: #999;
            font-size: 0.9rem;
        }

        .button {
            display: inline-block;
            padding: 0.8rem 2rem;
            background: #FFE300;
            color: #222;
            text-decoration: none;
            border-radius: 24px;
            font-weight: bold;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
<header class="header">
    <div class="logo">
        <img src="image/login-logo.jpg" alt="红灯笼">
    </div>
    <nav class="nav-links">
        <a href="#">首页</a>
        <a href="#">和红灯笼合作</a>
        <a href="#">我们的科技</a>
        <a href="#">企业社会责任</a>
        <a href="#">红灯笼公益</a>
        <a href="#">投资者关系</a>
        <a href="#">加入我们</a>
    </nav>
    <div>
        <a href="#" style="margin-right: 1rem;">下载红灯笼</a>
        <a href="#" style="margin-right: 1rem;">简体中文</a>
        <a href="login.jsp">登录</a>
    </div>
</header>

<section class="hero">
    <h1>红灯笼是一家科技零售公司</h1>
    <p>红灯笼以"零售 + 科技"的战略践行"帮大家吃得更好，生活更好"的公司使命。</p>
    <p>
        <%
            String establishDate = "2010年3月";
            String ipoDate = "2018年9月20日";
        %>
        自<%= establishDate %>成立以来，红灯笼持续推动服务零售和商品零售在需求端和供给端的数字化升级。到了<%= ipoDate %>，红灯笼在港交所挂牌上市。
    </p>
</section>

<section class="download-section">
    <h2>下载红灯笼App</h2>
    <a href="#" class="button">立即下载</a>
</section>

<section class="news-section">
    <h2>最新动态</h2>
    <div class="news-grid">
        <div class="news-card">
            <div style="margin-left: 1rem;">财报新闻</div>
            <div class="news-content">
                <h3>红灯笼发布2024年Q3财报：营收936亿元 多措并举推动生态共赢</h3>
                <p>11月29日，红灯笼(股票代码:3690.HK)发布2024年第三季度业绩报告。本季度，美团实现营收936亿元(人民币，下同)，同比增长22.4%。</p>
                <div class="news-date">2024-11-29</div>
            </div>
        </div>
        <div class="news-card">
            <div style="margin-left: 1rem;">全球化新闻</div>
            <div class="news-content">
                <h3>全球化第一站飞向迪拜 红灯笼无人机获许在当地开设商业化航线</h3>
                <p>迪拜无人机配送全球首张商业许可予美团，获回外卖及医疗应用年长许可。</p>
                <div class="news-date">2024-12-18</div>
            </div>
        </div>
    </div>
</section>

<footer style="text-align: center; padding: 2rem; background: #f5f5f5; margin-top: 2rem;">
    <p>© <%= new java.text.SimpleDateFormat("yyyy").format(new java.util.Date()) %> 红灯笼. All rights reserved.</p>
</footer>
</body>
</html>